<template>
  <div class="" style="margin-top: 20px">
    <el-form ref="formRef" label-width="150px" :model="form" :rules="rules">
      <el-form-item label="设备编号" prop="deviceId">
        <el-input v-model="form.deviceId" />
      </el-form-item>
      <el-form-item label="设备名称" prop="DeviceName">
        <el-input v-model="form.DeviceName" />
      </el-form-item>
      <el-form-item label="设备IP" prop="IP">
        <el-input v-model="form.IP" />
      </el-form-item>
      <!-- <el-form-item label="设备IP" prop="IP">
        <el-input v-model="form.IP" />
      </el-form-item>
      <el-form-item label="设备端口" prop="Port">
        <el-input v-model="form.Port" />
      </el-form-item> -->
      <el-form-item label="设备型号" prop="Model">
        <el-input v-model="form.Model" />
      </el-form-item>
      <el-form-item label="厂家" prop="Factory">
        <el-input v-model="form.Factory" />
      </el-form-item>
      <el-form-item label="联系人" prop="Contacts">
        <el-input v-model="form.Contacts" />
      </el-form-item>
      <el-form-item label="联系方式" prop="ContactInformation">
        <el-input v-model="form.ContactInformation" />
      </el-form-item>
      <el-form-item label="采购时间" prop="ProcurementTime">
        <el-date-picker v-model="form.ProcurementTime" placeholder="采购时间" />
      </el-form-item>

      <!-- <el-form-item label="创建者" prop="Creator">
        <el-input v-model="form.Creator" />
      </el-form-item> -->
      <!-- <el-form-item label="创建时间" prop="CreateTime">
        <el-input v-model="form.CreateTime" />
      </el-form-item> -->
    </el-form>
    <div class="pay-button-group">
      <el-button @click="handleSubmit1">上一步</el-button>
      <el-button type="primary" @click="handleSubmit">下一步</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      DeviceType: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        formRef: null,
        form: {
          deviceId: '',
          DeviceName: '',
          DevicePicture: '',
          IP: '',
          Port: '',
          Model: '',
          Factory: '',
          Contacts: '',
          ContactInformation: '',
          ProcurementTime: '',
          Creator: '',
          CreateTime: '',
        },
        rules: {
          deviceId: [
            { required: true, message: '请输入设备编号', trigger: 'blur' },
          ],
          DeviceName: [
            { required: true, message: '请输入设备名称', trigger: 'blur' },
          ],
          // DevicePicture: [
          //   { required: true, message: '请输入设备IP', trigger: 'blur' },
          // ],
          IP: [{ required: true, message: '请输入设备IP', trigger: 'blur' }],
          Port: [
            { required: true, message: '请输入设备端口', trigger: 'blur' },
          ],
          Model: [
            { required: true, message: '请输入设备型号', trigger: 'blur' },
          ],
          Factory: [{ required: true, message: '请输入厂家', trigger: 'blur' }],
          Contacts: [
            { required: true, message: '请输入联系人', trigger: 'blur' },
          ],
          ContactInformation: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
          ],
          ProcurementTime: [
            { required: true, message: '请输入采购时间', trigger: 'blur' },
          ],
          Creator: [
            { required: true, message: '请输入创建者', trigger: 'blur' },
          ],
          CreateTime: [
            { required: true, message: '请输入创建时间', trigger: 'blur' },
          ],
        },
      }
    },
    mounted() {},
    methods: {
      handleSubmit1() {
        this.$emit('change-step', 0)
      },
      handleSubmit() {
        this.$refs['formRef'].validate((valid) => {
          if (valid) {
            let step = 5
            switch (this.DeviceType) {
              case '机床设备':
                step = 2
                break
              case '料库设备':
                step = 3
                break
              case '运输设备':
                step = 4
                break
            }
            let user = JSON.parse(localStorage.getItem('UserInfo'))
            console.log('useruser', user)
            this.form.Creator = user ? user.UserName : ''
            this.form.CreateTime = this.days()
            this.form.ProcurementTime = this.days(this.form.ProcurementTime)

            this.$emit('change-step', step, {
              CommonInfo: this.form,
            })
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pay-button-group {
    display: block;
    margin: 20px auto;
    text-align: center;
  }
</style>
